<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/reveal.css"/>
	</head>
	<body>
		<div class="reveal">Azure Lane アズールレーン</div>
	</body>
	<script type="text/javascript">
		let duration = 0.8;
		let delay = 0.3;
		let revealText = document.querySelector(".reveal");
		let letters = revealText.textContent.split("");
		revealText.textContent = "";
		let middle = letters.filter(e => e !== " ").length / 2;
		letters.forEach((letter, i) => {
		  let span = document.createElement("span");
		  span.textContent = letter;
		  span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`;
		  revealText.append(span);
		});
	</script>
</html>
